{% extends 'base/nav.html' %}
{% load my_tags_filters %}

{% block title %}情感分析 - 旅游舆情监测{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1><i class="fa fa-pie-chart text-primary"></i> 情感分析</h1>
                <p class="text-muted">全面分析旅游景点的用户情感倾向</p>
            </div>
        </div>
    </div>

    <!-- 总体情感统计 -->
    <div class="row mb-5">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0"><i class="fa fa-bar-chart"></i> 总体情感分布</h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="p-3 bg-success text-white rounded">
                                <h3>{{ total_positive }}</h3>
                                <p>正面评价</p>
                                <small>{{ positive_percent|floatformat:1 }}%</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 bg-warning text-white rounded">
                                <h3>{{ total_neutral }}</h3>
                                <p>中性评价</p>
                                <small>{{ neutral_percent|floatformat:1 }}%</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 bg-danger text-white rounded">
                                <h3>{{ total_negative }}</h3>
                                <p>负面评价</p>
                                <small>{{ negative_percent|floatformat:1 }}%</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 情感分布图 -->
                    <div class="row mt-4">
                        <div class="col-md-8 offset-md-2">
                            <div class="progress" style="height: 30px;">
                                <div class="progress-bar bg-success" style="width: {{ positive_percent }}%">
                                    {{ positive_percent|floatformat:1 }}%
                                </div>
                                <div class="progress-bar bg-warning" style="width: {{ neutral_percent }}%">
                                    {{ neutral_percent|floatformat:1 }}%
                                </div>
                                <div class="progress-bar bg-danger" style="width: {{ negative_percent }}%">
                                    {{ negative_percent|floatformat:1 }}%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 热门景点 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h4 class="mb-0"><i class="fa fa-fire"></i> 热门景点排行榜</h4>
                </div>
                <div class="card-body">
                    {% if hot_attractions %}
                    <div class="list-group">
                        {% for attraction in hot_attractions %}
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">
                                    <a href="{% url 'main:attraction_detail' attraction.pk %}">
                                        {{ attraction.name }}
                                    </a>
                                </h6>
                                <span class="badge badge-primary">{{ attraction.heat_index }}</span>
                            </div>
                            <p class="mb-1 text-muted small">
                                <i class="fa fa-map-marker"></i> {{ attraction.location }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fa fa-comment"></i> {{ attraction.review_count }} 评论
                                </small>
                                <span class="badge badge-{% if attraction.avg_sentiment_score > 0.1 %}success{% elif attraction.avg_sentiment_score < -0.1 %}danger{% else %}warning{% endif %}">
                                    {{ attraction.avg_sentiment_score|floatformat:2 }}
                                </span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">暂无数据</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 情感最佳景点 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0"><i class="fa fa-thumbs-up"></i> 情感最佳景点</h4>
                </div>
                <div class="card-body">
                    {% if best_sentiment_attractions %}
                    <div class="list-group">
                        {% for attraction in best_sentiment_attractions %}
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">
                                    <a href="{% url 'main:attraction_detail' attraction.pk %}">
                                        {{ attraction.name }}
                                    </a>
                                </h6>
                                <span class="badge badge-success">{{ attraction.avg_sentiment_score|floatformat:2 }}</span>
                            </div>
                            <p class="mb-1 text-muted small">
                                <i class="fa fa-map-marker"></i> {{ attraction.location }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fa fa-comment"></i> {{ attraction.review_count }} 评论
                                </small>
                                <div class="sentiment-mini">
                                    <span class="badge badge-success">{{ attraction.positive_count }}</span>
                                    <span class="badge badge-warning">{{ attraction.neutral_count }}</span>
                                    <span class="badge badge-danger">{{ attraction.negative_count }}</span>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">暂无数据</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 统计数据 -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h4 class="mb-0"><i class="fa fa-info-circle"></i> 统计概览</h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <h4 class="text-primary">{{ total_attractions }}</h4>
                            <p class="text-muted">景点总数</p>
                        </div>
                        <div class="col-md-3">
                            <h4 class="text-success">{{ total_reviews }}</h4>
                            <p class="text-muted">评论总数</p>
                        </div>
                        <div class="col-md-3">
                            <h4 class="text-info">{{ avg_sentiment_score|floatformat:2 }}</h4>
                            <p class="text-muted">平均情感分</p>
                        </div>
                        <div class="col-md-3">
                            <h4 class="text-warning">{{ total_collections }}</h4>
                            <p class="text-muted">收藏总数</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.progress-bar {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-group-item {
    border: 1px solid #e9ecef;
    margin-bottom: 5px;
    border-radius: 5px;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

.sentiment-mini .badge {
    font-size: 10px;
    margin-left: 2px;
}

.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    margin-bottom: 20px;
}

.card-header {
    border-bottom: none;
    font-weight: 600;
}
</style>
{% endblock %}